<template>
  <div class="source-drawer">
    <el-drawer
      ref="drawer"
      :visible="visible"
      @update:visible='cancel'
      :with-header="false"
      direction="rtl"
      size="40%"
      custom-class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <node-form ref="NodeForm"></node-form>
        <el-divider></el-divider>
        <draggable
          v-model="parentList"
          class="list-group"
          tag="ul"
          v-bind="dragOptions"
        >
          <transition-group
            type="transition"
            :name="'flip-list'"
          >
            <li
              v-for="element in parentList"
              :key="element.id"
              class="list-group-item"
            >
              <div
                class="list-group-item_li"
                :title="element.name"
              >{{ element.name }}</div>
              <div class="list-group-item_li list-group-item_icon">
                <i
                  :class="'el-icon-s-operation'"
                  aria-hidden="true"
                ></i>
              </div>
            </li>
          </transition-group>
        </draggable>
        <div class="demo-drawer__footer">
          <div class="demo-drawer__footer">
            <el-row
              type="flex"
              justify="center"
            >
              <el-col :span="4">
                <el-button @click="cancel">取 消</el-button>
              </el-col>
              <el-col :span="4">
                <el-button
                  type="primary"
                  @click="saveExclusioon"
                >确 定</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { commonMixin } from './common-mixin'
import { generalMixin } from "./general-mixin";

import draggable from 'vuedraggable'

import { cloneDeep } from 'lodash'
export default {
  components: {
    draggable
  },
  mixins: [commonMixin, generalMixin],
  data() {
    return {
      parentList: []
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.nodeInit()
      }
    }
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        sort: true, // 定义是否可以拖拽
        group: 'source', // name相同的组可以互相拖动
        ghostClass: 'ghost' // 设置拖动元素的class的占位符的类名。
      }
    }
  },
  methods: {
    async nodeInit() {
      const { name } = this.node
      await this.$nextTick()
      this.$refs.NodeForm.nodeFormInit(name)
      this.parentList = cloneDeep(this.getParentNode())
      this.parentList.forEach(node => {
        node.type = "exclusionChild"
        node.groupNodeId = node.id
      })
    },
    getParentNode() {
      const { nodeList } = this.data
      const parentIdArr = this.getParentId()
      const parentList = nodeList.filter((node) => {
        if (parentIdArr.includes(node.id)) {
          return node
        }
      })

      return parentList
    },
    getParentId() {
      const { lineList } = this.data
      const { id } = this.node
      const childIdArr = []
      lineList.forEach(({ from, to }) => {
        if (to === id) {
          childIdArr.push(from)
        }
      })
      return childIdArr
    },
    /**
   * 初始化分支子节点的坐标
   */
    initNodePlace(parentList) {
      const { left, top } = this.node
      const length = parentList.length === 1 ? 2 : parentList.length
      parentList.forEach((node, index) => {
        const childLeft = parseInt(left) + length * 60
        const childTop = parseInt(top) + index * 80
        node.left = `${childLeft}px`
        node.top = `${childTop}px`
      })
    },
    async saveExclusioon() {
      const parentList = this.parentList
      const { id: parentId } = this.node
      const { name } = this.$refs.NodeForm['nodeForm']
      const { status, message } = this.validateDrawerForm()
      const brancChildIdArr = this.getChildId(parentId)
      const nowBranchChildIdArr = parentList.map(branch => branch.id)
      const deleteNodeIdArr = brancChildIdArr.filter(nodeChildId => !nowBranchChildIdArr.includes(nodeChildId))
      if (status === 'error') {
        return this.$message.error(message)
      }
      parentList.forEach((item, index) => {
        item.id = this.getUUID()
        item.index = index + 1
        this.$set(this.formSetting, item.id, { ...item })
      })
      this.initNodePlace(parentList)
      /**
       * step2 删除分支节点及formSetting对应的配置
       */
      this.data.nodeList = this.data.nodeList.filter(({ id }) => !deleteNodeIdArr.includes(id))
      deleteNodeIdArr.forEach((childId) => {
        this.jsPlumb.removeAllEndpoints(childId)
        this.$delete(this.formSetting, childId)
      })
      await this.$nextTick()
      this.data.nodeList = [...this.data.nodeList, ...parentList]
      await this.$nextTick()
      parentList.forEach((nodeParent) => {
        this.makeSourceTarget(nodeParent)
        this.jsPlumb.connect(
          {
            source: parentId,
            target: nodeParent.id
          },
          this.jsplumbConnectOptions
        )
      })
      this.data.nodeList.filter((node) => {
        if (node.id === parentId) {
          node.name = name
          this.$emit('reloadCanvas')
          this.cancel()
        }
      })
    }
  }
};
</script>
 <style lang="scss" scoped>
.margin_b_24 {
  margin-bottom: 24px;
}
::v-deep {
  .el-date-editor {
    width: 100%;
  }
  .el-drawer__body {
    overflow: scroll;
  }
  .el-divider--horizontal {
    margin: 0 0 24px;
  }
  .el-drawer__header {
    border-top: 1px solid #dce3e8;
    border-bottom: 1px solid #dce3e8;
    background: #f1f3f4;
    padding: 5px 10px;
    margin-bottom: 1rem;
    font-size: 18px;
  }
  .el-drawer {
    border-left: 1px solid rgb(220, 227, 232);
    background-color: rgb(251, 251, 251);
  }
  .demo-drawer__content {
    padding: 20px;
  }
}
</style>
